import React, { useState, useEffect } from 'react';
import './drawer.less'
import { ChangeSideSubjectApi } from '@/request/api'
import Drawer from '@material-ui/core/Drawer';

export default function MyDrawer(props) {
  const [sublist, setSublist] = useState([])
  const [open, setOpen] = useState(false)
  const [lindex, setLindex] = useState()
  // console.log('lalalallala', props);
  let { getItem, title } = props
  useEffect(() => {
    ChangeSideSubjectApi().then(res => {
      setSublist(res.data)
      
    })
  }, []);
  
  //点击切换科目
  const subClickFn = (item) => () => {
    console.log('当前科目', item);
    setLindex(item.id)
    // 隐藏抽屉
    setOpen(false)
    getItem(item)
  }
  
  return <div className='drawer'>
    <div onClick={() => setOpen(true)}>{title}</div>
    <Drawer open={open} onClose={() => setOpen(false)}>
          <ul>
            {sublist.map(item => (
              <li className={lindex === item.id ? 'fullList active' : 'fullList'} key={item.id} onClick={subClickFn(item)}>{item.title}</li>
            ))}
          </ul>
    </Drawer>
  </div>;
}
